<template>
  <div style="padding:50px">
    <h1 class="titleCenter">vue-bus</h1>

    <counter :number="number"></counter>
    <h1>{{countNum}}</h1>
    <el-button @click="handleAsyncIncrement" size="small" type="success">async 点我增加一百</el-button>

    <br>
    <br>
    <h3>展示折叠自定义指令</h3>
    <!-- maxHight最大行高，这里设置84 正好事28的三倍，所以显示了三行 -->
    <div class="textCollpose">
      <span v-fold="{maxHeigth: 84, currentType: 'fold'}">
        1111111111111
        11111111111111
        1111111111111111
        11111111111111111
        111111111111111111111111
        11111111111111111
        111111111111111111111111
        11111111111111111
        111111111111111111111111
      </span>
    </div>
  </div>
</template>

<script>
import directive from '../../common/js/directive'
import { mapGetters } from 'vuex'
import counter from './counter'
export default {
  name: 'vueBus',
  components: {
    counter
  },
  computed: {
    ...mapGetters([
      'count'
    ]),

  },
  data () {
    return {
      number: 0,
      countNum: 0
    }
  },
  // 需要在created中使用，如果再mounted中使用可能接受不到其他组件来自created中的数据
  created () {
    // console.log(this.count) 最初的vuex中conunt为0
    this.$bus.on('add', num2 => {
      this.number = num2 //num2 counter传过来的数据
    })
  },
  beforeDestroy () {
    this.$bus.off('add', this.handleAsyncIncrement)
  },
  methods: {
    handleAsyncIncrement () {
      //触发vueBus.js中的action中的方法，并传入参数10
      this.$store.dispatch('asyncIncrement', 10).then(() => {
        // console.log(this.$store.state.vueBus.count);
        this.countNum = this.$store.state.vueBus.count
        // 在action中使用commit触发mutation中时传入的参数100,此时count最终值100
      })
    },
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    handlePreview (file) {
      console.log(file);
    }
  }
}
</script>

<style scoped>
.textCollpose {
  width: 100px;
  /* 自定义默认的行高28px */
}
</style>